import React, { useSyncExternalStore } from 'react'

import { todosStore } from './20-todo'

export default function App() {

    // useSyncExternalStore 用来订阅外部数据用的，这些外部的数据是非 React 代码
    // 当然我们在做 react 开发的时候要优先考虑使用 useState 和 useReducer 来内建数据
    const todos = useSyncExternalStore(todosStore.subscribe, todosStore.getSnapshot)

    return (
        <div>
            <button onClick={() => { todosStore.addTodo() }}>添加</button>
            <ul>
                {todos.map(item => <li key={item.id}>{item.text}</li>)}

            </ul>
        </div>
    )
}
